<template>
	<view class="bg-gray1">
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品详情</block>
		</cu-custom>
		<!-- 商品轮播 -->
		<view class="product-bg">
			<swiper :class="'screen-swiper square-dot'" indicator-dots="true" circular="true" autoplay="true"
				interval="5000" duration="500" @change="swiperChange" indicator-color="#cccccc"
				indicator-active-color="#ffffff">
				<swiper-item v-for="(item, index) in goodsSpu.picUrls" :key="index">
					<view style="position: relative;height: 100%;" v-if="goodsSpu.prescription=='2'">
						<view class="flex goodImg_mask">
							<view class="">处方药依法不展示包装</view>
							<view class="">请在药师指导下使用</view>
						</view>
						<image :src="item" mode="aspectFill"></image>
					</view>
					<image :src="item" mode="aspectFill" v-else></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 价格显示 -->
		<view class="goods_info goods_card">
			<view class="goods_info1">
				<view class="">
					<!-- 单sku -->
					<view>
						<text class="text-red1">
							<text class="text-bold">活动价￥</text>
							<text
								class="font-40 text-bold">{{goodsSku.salesPrice ? goodsSku.salesPrice.toFixed(2) : '0.00'}}</text>
							<text v-if="goodsSku.salesPrice < goodsSku.marketPrice"
								class="text-price line-through text-gray1 font-26 mLeft-20">
								{{goodsSku.marketPrice.toFixed(2)}}
							</text>
						</text>
					</view>
					<!-- 多sku -->
					<!-- <view v-if="goodsSpu.priceDown < goodsSpu.priceUp">
						<text
							class="text-price text-red text-bold">{{ goodsSpu.priceDown ? goodsSpu.priceDown : '' }}~{{ goodsSpu.priceUp ? goodsSpu.priceUp : goodsSpu.priceUp }}</text>
					</view> -->
				</view>
				<!-- 佣金 -->
				<view class="shareBtn" @click="sharePost" v-if="goodsSpu.id&&goodsSku.id&&userInfo.enable=='1'">
					<view class="" v-if="userInfo.userType!=3">
						<text class="font-26">分享</text>
						<text class="font-36">赚</text>
						<text class="font-26 margin-left-xs">￥</text>
						<text v-if="userInfo.userType == 1"
							class="font-38 margin-right-xs">{{goodsSku.earning ? goodsSku.earning.toFixed(2) : '0.00' }}</text>
						<text v-if="userInfo.userType == 2"
							class="font-38 margin-right-xs">{{goodsSku.earning1 ? goodsSku.earning1.toFixed(2) : '0.00' }}</text>
					</view>
					<view v-if="userInfo.userType==3">
						<text class="font-28 margin-right-xs">分享</text>
					</view>
					<image src="@/static/image/shareIcon.png" style="width:30rpx;height:32rpx"></image>
				</view>
			</view>
			<!-- 商品名称 -->
			<view class="goods_info2" v-if="goodsSpu.name">
				<view class="text-black text-bold overflow-1 font-30">
					{{ goodsSpu.name }}
				</view>
				<view class="padding-left-xl" @click="userCollect()" v-if="userInfo.userType!=3">
					<image src="../../../static/image/star-full.png" mode="" style="width:38rpx;height:38rpx"
						v-if="goodsSpu.storeUp"></image>
					<image src="../../../static/image/star.png" mode="" style="width:38rpx;height:38rpx" v-else></image>
				</view>
			</view>
			<view class="flex align-center text-black" style="font-size: 24rpx;margin-top: 4rpx;"
				v-if="goodsSpu.drugType=='保健品'">
				<view class="cuIcon-infofill"></view>
				<view style="margin-left: 4rpx;">保健食品不是药物，不能代替药物治疗疾病</view>
			</view>
		</view>
		<!-- 处方药提示说明 -->
		<view v-if="goodsSpu.prescription=='2'" class="margin-top-sm cu-bar bg-white"
			style="padding: 20rpx 20rpx;flex-direction: column;align-items: flex-start;">
			<view class="text-black text-bold">用药提示</view>
			<view class="flex margin-top-sm" style="font-size: 26rpx;">
				<view class="text-black text-bold" style="width: 134rpx;">处方药：</view>
				<view class="text-gray">处方药须凭处方在药师指导下购买和使用</view>
			</view>
			<view class="flex" style="font-size: 26rpx;">
				<view class="text-black text-bold" style="width: 134rpx;">功能主治：</view>
				<view class="text-gray">根据法规要求,请咨询药师了解处方药详细信息</view>
			</view>
		</view>
		<!-- 处方药购买流程 -->
		<view class="goods_card" v-if="goodsSpu.prescription=='2'">
			<view class="flex justify-between" style="width:100%">
				<view class="sub_title">处方药购买流程</view>
				<view class=" text-sm text-gray">
					<text class="cuIcon-infofill"></text>
					<text>遵照药监局对线上处方的管理规定</text>
				</view>
			</view>
			<view class="flex text-gray align-center" style="margin-top: 30rpx;">
				<view class="dItem">
					<view>
						<image
							src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/e7e3daea-db59-4fa5-b2fc-da552cef687f.png"
							class="d_image"></image>
					</view>
					<view>选择药品提交需求</view>
				</view>
				<view class="cuIcon-right dItem_icon"></view>
				<view class="dItem">
					<view>
						<image
							src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/837dba5b-db42-4b7a-b5df-d49f25ba9dcb.png"
							class="d_image"></image>
					</view>
					<view>处方信息填写</view>
				</view>
				<view class="cuIcon-right dItem_icon"></view>
				<view class="dItem">
					<view>
						<image
							src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/46664dee-1550-4f8d-bae7-d01ad7284e77.png"
							class="d_image"></image>
					</view>
					<view>提交需求订单</view>
				</view>
				<view class="cuIcon-right dItem_icon"></view>
				<view class="dItem">
					<view>
						<image
							src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/6bb35ace-ae14-415c-8872-d7b9aac27eaa.png"
							class="d_image"></image>
					</view>
					<view>医生在线开方&审方</view>
				</view>
				<view class="cuIcon-right dItem_icon"></view>
				<view class="dItem">
					<view>
						<image
							src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/abfbda22-2665-4045-8f72-c995aee19aa9.png"
							class="d_image"></image>
					</view>
					<view>支付后药店发货</view>
				</view>
			</view>
		</view>

		<!-- 商品参数 -->
		<view class="goods_card">
			<view class="flex justify-between" style="width:100%">
				<view class="sub_title">商品参数</view>
			</view>
			<view class="goodsTable">
				<view class="gTable_item">
					<view>商品名称</view>
					<view>{{goodsSpu.name}}</view>
				</view>
				<view class="gTable_item">
					<view>商品编码</view>
					<view>{{goodsSpu.spuCode}}</view>
				</view>
				<view class="gTable_item" v-if="goodsSpu.commonName">
					<view>通用名</view>
					<view>{{goodsSpu.commonName}}</view>
				</view>
				<view class="gTable_item" v-if="goodsSku&&goodsSku.specs">
					<view>规格</view>
					<view>{{goodsSku.specs}}</view>
				</view>
				<view class="gTable_item" v-if="goodsSpu.factory">
					<view>生产企业</view>
					<view>{{goodsSpu.factory}}</view>
				</view>
				<view class="gTable_item" v-if="goodsSpu.factoryAddre">
					<view>产地</view>
					<view>{{goodsSpu.factoryAddre}}</view>
				</view>
				<view class="gTable_item" v-if="goodsSpu.approvalNumber">
					<view>批准文号</view>
					<view>{{goodsSpu.approvalNumber}}</view>
				</view>
				<view class="gTable_item" v-if="goodsSpu.functions">
					<view>功能主治</view>
					<view>{{goodsSpu.functions}}</view>
				</view>
				<view class="gTable_item" v-if="goodsSpu.storage">
					<view>存储条件</view>
					<view>{{goodsSpu.storage}}</view>
				</view>
				<view class="gTable_item" v-if="goodsSpu.unit">
					<view>单位</view>
					<view>{{goodsSpu.unit}}</view>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="goods_card" v-if="article_description">
			<view class="sub_title">商品详情</view>
			<view class="margin-top" :class="goodsSpu.prescription=='2'?'goods_detail_mask':''">
				<jyf-parser :html="article_description"></jyf-parser>
			</view>
		</view>

		<view class="cu-load bg-gray to-down">已经到底啦...</view>

		<!-- 下架提示 -->
		<!-- <view :class="'cu-modal ' + (goodsSpu.shelf == '0' ? 'show' : '')">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl">抱歉，该商品已下架</view>
			</view>
		</view> -->

		<create-share ref="createShare" :goodsSpu="goodsSpu" :activityId="activityId" :gType="gType"></create-share>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	import util from '@/utils/util'

	import createShare from '@/components/create-poster/create-share.vue'

	export default {
		components: {
			createShare
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				goodsId: '', // 商品ID
				goodsSpu: { // 商品信息 - spu
					picUrls: []
				},
				goodsSku: {}, // 商品信息 - sku
				shopInfo: {},
				currents: 1,
				article_description: "",
				userInfo: {},
				activityId: '',
				gType: ''
			};
		},
		onLoad(options) {
			app.initPage().then(res => {
				// 点击商品进入
				if (options.id) {
					this.goodsId = options.id
					this.goodsGet()
				}
				if (options.gType) {
					this.gType = options.gType
				}
				if (options.activityId) {
					this.activityId = options.activityId
				}
			});
		},
		onShow() {
			this.userInfo = uni.getStorageSync('user_info')
		},
		onHide() {},
		// onShareAppMessage() {
		// 	return {
		// 		title: this.goodsSpu.name,
		// 		imageUrl: this.goodsSpu.picUrls[0],
		// 		path: '/pages/goods/goods-video/index?spuId=' + this.goodsSpu.id + '&userId=' + this.userInfo.id
		// 	}
		// },
		methods: {
			goodsGet() {
				api.goodsGet(this.goodsId).then(res => {
					this.goodsSpu = res.data;

					if (this.goodsSpu) {

						if (this.goodsSpu.shelf == '0') {
							uni.showModal({
								title: '提示',
								content: '抱歉，该商品已下架',
								confirmText: '返回',
								showCancel: false,
								success(res) {
									uni.navigateBack({
										delta: 1
									})
								}
							})
							return
						}

						if (!this.goodsSpu.skus || !this.goodsSpu.skus.length) {
							uni.showModal({
								title: '提示',
								content: '抱歉，该商品已关闭',
								confirmText: '返回',
								showCancel: false,
								success(res) {
									uni.navigateBack({
										delta: 1
									})
								}
							})
							return
						}


						if (this.goodsSpu.type == '6') {
							this.shopInfo = uni.getStorageSync('Y_mainstore')
						} else if (this.goodsSpu.type == '2') {
							this.shopInfo = uni.getStorageSync('M_mainstore')
						}

						this.checkCollect()

						this.goodsSku = this.goodsSpu.skus ? this.goodsSpu.skus[0] : {}

						this.getStock()

						this.article_description = this.goodsSpu.description;
					}
				});
			},
			getStock(id) {
				api.getGoodsStock(this.shopInfo.id, this.goodsSku.id).then(res => {
					if (res.data == null || res.data.stockNum == 0) {
						uni.showModal({
							title: '提示',
							content: '暂时缺货，补货中！',
							showCancel: false,
							success: res => {
								// uni.navigateTo({
								// 	url: '/pages/location/index?goods=true&type='+this.goodsSpu.type
								// });
							}
						});
					}
				})
			},
			swiperChange(e) {
				this.currents = e.detail.current + 1;
			},
			// 生成分享海报
			sharePost() {
				this.$nextTick(() => {
					this.$refs.createShare.openSharePop()
				})
			},
			checkCollect() {
				api.userCollectCheck({
					spuId: this.goodsId
				}).then(res => {
					this.goodsSpu.storeUp = res.data
				})
			},
			//收藏
			userCollect() {
				if (this.goodsSpu.storeUp) {
					api.userCollectDel({
						spuId: this.goodsId
					}).then(res => {
						uni.showToast({
							title: '已取消收藏',
							icon: 'success',
							duration: 2000
						});
						this.goodsSpu.storeUp = false
					});
				} else {
					api.userCollectAdd({
						spuId: this.goodsId
					}).then(res => {
						uni.showToast({
							title: '收藏成功',
							icon: 'success',
							duration: 2000
						});
						this.goodsSpu.storeUp = true
					})
				}
			}
		}
	};
</script>
<style scoped>
	.product-bg {
		width: 100%;
		position: relative;
	}

	.product-bg swiper {
		width: 100%;
		height: calc(100vw);
		position: relative;
	}

	.product-bg .page-index {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
	}

	.goods_info {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	.goods_info1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods_info1 .shareBtn {
		background-image: linear-gradient(90deg, #FF7A2F, #FF001F);
		color: #fff;
		border-radius: 14rpx;
		text-align: right;
		height: 60rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.goods_info2 {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		height: 45rpx;
		line-height: 45rpx;
	}

	.goods_card {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	.sub_title {
		font-weight: 700;
		font-size: 28rpx;
		color: #333
	}

	.cu-bar {
		min-height: 80upx;
	}

	.ali-modal {
		display: flex;
		justify-content: center;
	}

	.goodImg_mask {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 50;
		align-items: center;
		flex-direction: column;
		justify-content: flex-end;
		padding-bottom: 60rpx;
		backdrop-filter: blur(2px);
		background-color: rgba(255, 255, 255, 0.2);
		font-weight: 700;
		font-size: 44rpx;
		letter-spacing: 16rpx;
		color: #595454;
	}

	.dItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 22rpx;
		width: 20%;
		text-align: center;
	}

	.dItem_icon {
		padding: 0 10rpx;
		color: #E9E9E9
	}

	.d_image {
		width: 60rpx;
		height: 60rpx;
	}

	.goodsTable {
		margin-top: 20rpx;
		font-size: 24rpx;
		width: 100%;
		border-bottom: 1rpx solid #E5E6EB
	}

	.goodsTable .gTable_item {
		display: flex;
		border-top: 1rpx solid #E5E6EB;
		border-right: 1rpx solid #E5E6EB;
	}

	.goodsTable .gTable_item>view:first-child {
		border-left: 1rpx solid #E5E6EB;
		border-right: 1rpx solid #E5E6EB;
		padding: 10rpx 10rpx 10rpx 20rpx;
		width: 170rpx;
		display: flex;
		align-items: center;
		color: #86909C
	}

	.goodsTable .gTable_item>view:last-child {
		padding: 16rpx 10rpx 16rpx 20rpx;
		flex: 1;
		display: flex;
		align-items: center;
		color: #86909C
	}

	.goods_detail_mask {
		filter: blur(2px);
	}
</style>